<template>
  <view id="workbench">
    <view class="controls_list">
      <view
        class="item"
        @tap="goOtherPage(item)"
        v-for="item in workbenchStore.controls_list"
        :key="item.id">
        <view class="bg" :style="{ backgroundColor: item.color }">
          <image :src="`../../static/img/home/${item.img}`" />
        </view>
        <text>
          {{ item.naem }}
        </text>
      </view>
    </view>
    <view class="forewarning_list">
      <!-- <zkTopBg height="60%" /> -->
      <zk-topBg> </zk-topBg>
      <view class="title fs_18">
        <text>预警</text>
        <image src="@/static/img/home/warning.png" />
      </view>
      <scroll-view class="scroll" scroll-y>
        <view
          @tap="haneleDetail(item)"
          class="item card"
          v-for="(item, index) in msgStore.WorkbenchMsgBox.WorkbenchMsgList"
          :key="item.MsgCode">
          <view class="title flex fs_16">
            <view class="content flex">
              <view class="tag fs_10">{{ item.Sender }}</view>
              <text class="fs_14">{{ item.MsgTypeName }}</text>
            </view>
            <view class="go_see fs_12">去查看</view>
          </view>
          <view class="info flex">
            <text class="fs_14 text_overflow">
              {{ item.MsgText }}
            </text>
            <text class="fs_12">{{ item.SendTime }}</text>
          </view>
        </view>
      </scroll-view>
      <!--预警消息 Drawer -->
      <uni-drawer ref="showMessage" mode="right" :width="700">
        <!-- Drawer内容 -->
        <zk-msgDetail @back="closeDrawer"></zk-msgDetail>
      </uni-drawer>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useWorkbenchStore } from "../../stores/modules/workbench";
import { useMessageStore } from "@/stores/modules/message"; //消息
import { useActivePageStore } from "@/stores/modules/activePage";
import { useMemberStore } from "@/stores/modules/member";
const userStore = useMemberStore();
const useActiveStore = useActivePageStore();
import { onShow } from "@dcloudio/uni-app";
const msgStore = useMessageStore();
const workbenchStore = useWorkbenchStore();
const showMessage: any = ref(null);
onShow(() => {
  msgStore.getMessageList({ MsgStatus: "MsgUnread" });
  console.log("workbench onShow", workbenchStore.controls_list);
});
const haneleDetail = async (item: any) => {
  await msgStore.editFindMsgList({ MsgCode: item.MsgCode });
  msgStore.showType = "detail";
  showMessage.value.open();
};
const closeDrawer = () => {
  showMessage.value.close();
};
// 跳转其他页面
const goOtherPage = (item: any) => {
  useActiveStore.setActivePage(item.theme);
  if (item.theme === "Materialview") {
    return;
  } else {
    uni.navigateTo({
      url: item.path,
    });
  }
};
</script>

<style lang="scss" scoped>
#workbench {
  display: flex;
  justify-content: space-between;
  align-items: center;
  will-change: 100%;
  height: 100%;
  //抽屉样式
  ::v-deep .uni-drawer__content {
    border-radius: 10px;
  }
  .controls_list {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 55%;
    height: 100%;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      color: rgb(9, 14, 29);
      margin: 0 20px 20px;
      .bg {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        image {
          width: 64px;
          height: 64px;
        }
      }
    }
  }
  .forewarning_list {
    width: 45%;
    height: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .title {
      position: relative;
      image {
        width: 70px;
        height: 70px;
        position: absolute;
        top: -10px;
        right: 0;
      }
    }
    .scroll {
      height: 90%;
      padding: 10px 0;
      .item {
        margin-bottom: 10px;
        padding: 10px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.03) !important;
        .title {
          justify-content: space-between;
          margin-bottom: 10px;
          .tag {
            width: 28px;
            height: 15px;
            border-radius: 4px;
            color: rgba(255, 255, 255, 0.518);
            text-align: center;
            line-height: 15px;
            margin-right: 10px;
            background: linear-gradient(
              135deg,
              rgb(235, 140, 44) 0%,
              rgb(255, 185, 85) 100%
            );
          }
          .go_see {
            color: rgb(31, 171, 141);
          }
        }
        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .text_overflow {
            max-width: 60% !important;
          }
          color: rgb(167, 167, 167);
        }
      }
    }
  }
}
</style>
